<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本指令</title>
    <script src="./vue.js"></script>
</head>

<body>

    <div id="app">
        <!-- {{}}不会替代标签中的内容,只是把数据插入到所在位置,不识别html标签 -->
        <span>{{msg}}</span>
        <!-- v-text指令：会直接将所在标签原有内容覆盖掉,不识别html标签 -->
        <span v-text="msg"></span>
        <!-- v-html指令：会识别html标签，其他与v-text一样 -->
        <span v-html="msg"></span>
        <!-- 注意：{{}}和v-text都是单向数据绑定：只有数据绑定修改视图，
                   如果视图上的dom数据直接改变，不会影响到data数据 -->

        <!-- v-model是双向绑定，只适用于input/textarea/select等表单元素，即包含value属性的元素 -->
        <input type="text" v-model="msg">

        <!-- 双向绑定单选按钮：
            1.单选按钮别忘了通过name进行分组；
            2.为单选按钮设置好value值；
            3.通过v-model为单选按钮双向绑定一个data属性；
            4.注意：data中绑定的值，相当于设置单选按钮的默认选项 -->
        <input name="qiuhun" type="radio" value="yes" v-model="msg">
        <input name="qiuhun" type="radio" value="no" v-model="msg">

        <!-- 下拉框 ===================================================================-->
        <select v-model="安全区">
            <option value="P城">P城</option>
            <option value="Y城">Y城</option>
            <option value="军事基地">军事基地</option>
            <option value="安全区">安全区</option>
        </select>
        <!-- 此时vue里的data中，res='安全区' -->
        <p v-text="msg"></p>

        <!-- 复选框=========================================================================== -->
        <br />
        <input v-model="res" type="checkbox" name="chkLike" value="1">1
        <input v-model="res" type="checkbox" name="chkLike" value="2">2
        <input v-model="res" type="checkbox" name="chkLike" value="3">3
        <input v-model="res" type="checkbox" name="chkLike" value="4">4
        <br />

        <p v-text="res"></p>
        <!-- 补充内容======================================================================== -->
        <input type="text" v-model="res">
        <!--1. 指令中，可以直接写data中的属性名 -->
        <p v-text="res"></p>
        <!--2. 指令中，可以写简单表达式-->
        <p v-text="res + 123"></p>
        <!--3. 指令中，可以包含对象.语法-->
        <p v-text="dog.name"></p>

    </div>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                msg: 'yes'
                // 复选框中res应为数组
                // 即res:[]
            }
        })
    </script>
</body>

</html>